<template>
  <el-row style="height: 580px">
    <el-col :span="24">
      <h1>我的病例</h1>
      <template v-for="mr in mrs">
        <el-card class="box-card" shadow="hover" style="margin-top: 15px">
          <template #header>
            <el-row :gutter="24">
              <el-col :span="12">
                  <span>{{ formatTime(mr.createTime) }}</span>
              </el-col>
              <el-col :span="12">
                <el-link type="primary" @click="showDrugDialog(mr)" :underline="false">查看药方</el-link>
              </el-col>
            </el-row>
          </template>
          <div class="text item">
            <p>患者： {{ mr.patName }}</p>
            <el-row :gutter="24">
              <el-col :span="12">
                <p>
                  主治医师： {{ mr.docName }}
                </p>
              </el-col>
              <el-col :span="12">
                <p>
                  医生诊断： {{ mr.mrDetail }}
                </p>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </template>
    </el-col>
  </el-row>
  <el-dialog title="查看药方" v-model="preDrugDialogVisible" width="1000">
    <el-table :data="preDrugs" height="300px">
      <el-table-column label="药品名称" prop="drugName"/>
      <el-table-column label="数量" prop="drugNum"/>
      <el-table-column label="用量" prop="durgDetail"/>
    </el-table>
  </el-dialog>
</template>

<script>
import {fetchMrListByPatId} from "@/api/mr.js";
import jsCookie from "jscookie";
import {fetchPreDrugList} from "@/api/preDrug.js";

export default {
  name: "mr",
  data() {
    return {
      mrs: [],
      token: '',
      preDrugDialogVisible: false,
      preDrugs: [],
    }
  },
  created() {
    this.token = jsCookie.get('token');
    this.fetchMrListByPatId();
  },
  methods: {
    showDrugDialog(mr) {
      this.fetchPreDrugList(mr.preId).then(() => {
        this.preDrugDialogVisible = true;
      })
    },
    async fetchPreDrugList(preId) {
      await fetchPreDrugList(preId).then((response) => {
        this.preDrugs = response.data.data;
      })
    },
    formatTime(timeStr) {
      const appointmentTime = new Date(timeStr);
      const year = appointmentTime.getFullYear();
      const month = String(appointmentTime.getMonth() + 1).padStart(2, '0');
      const day = String(appointmentTime.getDate()).padStart(2, '0');
      const hours = String(appointmentTime.getHours()).padStart(2, '0');
      const minutes = String(appointmentTime.getMinutes()).padStart(2, '0');
      return `${year}年${month}月${day}日 ${hours}时${minutes}分`;
    },
    async fetchMrListByPatId() {
      const response = await fetchMrListByPatId(this.token);
      this.mrs = response.data.data;
    }
  }
}
</script>

<style scoped>

</style>
